import React, { useEffect, useState } from "react"
import { List, Avatar, Image } from 'antd-mobile'
import { FileOutline, RightOutline, CompassOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import { getUser } from "@/utils/localStorage";
import bg from '@/assets/img/bg_my.png'

import './index.css'
export default function My() {
    const navigate = useNavigate();

    const [userInfo, setUserInfo] = useState({})

    useEffect(() => {
        const userInfo = getUser()
        if (userInfo) {
            setUserInfo(userInfo)
        }
    }, [])
    return (
        <div className="My">
            <div className="header" style={{ backgroundImage: `url(${bg})` }}>
                <div className="user-info" >
                    <Avatar src={userInfo.avatar} style={{ '--size': '70px', '--border-radius': '90px' }} ></Avatar>
                    <span style={{ fontSize: '18px', color: 'black', marginTop: '10px' }}>{userInfo.nickname}</span>
                </div>
            </div>
            <List>
                <List.Item>
                    <div onClick={() => { navigate('/order') }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div><FileOutline color='#409eff' /> 我的订单</div>
                        <RightOutline />
                    </div>
                </List.Item>
                <List.Item>
                    <div onClick={() => { navigate('/address') }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div><CompassOutline color='#409eff' /> 我的地址</div>
                        <RightOutline />
                    </div>
                </List.Item>
                <List.Item>
                    <div onClick={() => { navigate('/ai')  }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div><CompassOutline color='#409eff' /> 智能客服</div>
                        <RightOutline />
                    </div>
                </List.Item>
            </List>
        </div>
    );
}
